<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="css/mainframe.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script type="text/javascript" src="js/ajax.js"></script>
  <link rel="shortcut icon" href="icon/favicon.ico" type="image/x-icon"/>
  <title>Where? - 找到你想要的位置</title>
</head>
<body>
  <div class="container">
  	<div class="row">
  		<div class="col-md-12 column">
  			<h1>
  				Where?
          <small>找到你想要的位置</small>
  			</h1>
        <br>
        <br>
        <input id="keyword_find" type="text" name="keyword_find"/>
        <button id="find-btn" type="button" class="btn btn-primary btn-sm">查找</button>
        <button id="find-wecstable-btn" type="button" class="btn btn-primary btn-sm">在wecstable中查找</button>
        <br>
        <br>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>关键词</th>
                <th>位置</th>
              </tr>
            </thead>
            <tbody id="resultTable">
            </tbody>
          <table>
        </div>
  			<ul class="pagination">
  			</ul>
        <br>
        <br>
        <h4>随手分享你的位置</h4>
        关键词:<input id="keyword_add" type="text" name="keyword_add"/><br>
        位置:<input id="location_add" type="text" name="location_add"/><br>
        <a href="javascript:share()">分享</a><div id="shareresult"></div>
  		</div>
  	</div>
  </div>

<script type="text/javascript">
$(function(){
  $('#keyword_find').focus(function(){//输入框获得焦点时全选文本
    this.select();
  });
  $('#keyword_find').keyup(function(e){//在输入框回车时触发查找
    if(e.keyCode == 13){
        find("location");
    }
  });
  $("#find-btn").click(function(){
    find("location");
  });
  $("#find-wecstable-btn").click(function(){
    find("wecstable_location");
  });
});

function find(table) {
  var keyword = $('#keyword_find').val();
  var idx = $('.pagination option:selected').val();
  if(idx === undefined){
    idx = 1;
  }
  httpget("service/find.php?limit=10&idx="+idx+"&keyword=" + keyword+"&table="+table);
}

function share(){
  var keyword = $('#keyword_add').val();
  var location = $('#location_add').val();
  httpget("service/share.php?keyword=" + keyword + "&location=" + location);
}

function stateChanged(){
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
    var type = xmlHttp.responseText.substr(0, 2);
    var returnContent = xmlHttp.responseText.substr(2);
    if(type === "01"){//查找位置返回内容
      if(returnContent !== '[]'){
        var result = $.parseJSON(returnContent);
        var html = "";
        $.each(result, function(i){
          var key = i;
          var value = result[i];
          var showKey = key;
          $.each(value["queryText"], function(j){
            showKey = showKey.replace(j, "<font class='token'>" + j + "</font>");
          });
          html += '<tr><td>'+showKey+'</td><td>'+value["value"]+'</td></tr>';
        });
        $('#resultTable').html(html);
      }else{
        $('#resultTable').html('<tr><td>无内容</td><td></td></tr>');
      }
    }else if(type === "02"){//分享位置返回内容
      if(returnContent==="success"){
        $('#shareresult').html("<div id='shareresultinner' class='alert alert-success pull-left'>分享成功！</div>");
        $("#shareresultinner").fadeOut(1000);
      }else{
        $('#shareresult').html("<div id='shareresultinner' class='alert alert-danger pull-left'>分享失败！" + returnContent + "</div>");
        $("#shareresultinner").fadeOut(1000);
      }
    }
  }
}

</script>
</body>
</html>
